
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
	<meta name="description" content="">
	<title>使用第三方 CSV 解析器</title>
	<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
	<script src="https://code.highcharts.com.cn/highcharts/modules/data.js"></script>
	<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by JShare at 2020-08-15 19:17:34
    From: https://code.hcharts.cn/highcharts/4OV87v
*************************************************************************
-->
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<div style="max-width: 800px; margin: 0 auto">

</div>

	<script>
	$(function () {
    /**
     * Use external CSV parser
     * http://papaparse.com/
     document.getElementById('data').innerHTML*/
    var csv = Papa.parse('distance.csv', {
        complete: function(results){
            console.log('Finished:', results.data);
        }
    });
    $('#container').highcharts({
        data: {
            rows: csv.data,
            seriesMapping: [{
                x: 0, // X values are pulled from column 0 by default
                y: 1, // Y values are pulled from column 1 by default
                label: 2 // Labels are pulled from column 2 and picked up in the dataLabels.format below
            }]
        },
        chart: {
            type: 'column'
        },
        title: {
            text: '日常运动'
        },
        xAxis: {
            minTickInterval: 24 * 36e5,
            dateTimeLabelFormats: {
                day: '%Y-%m-%d'
            }
        },
        yAxis: {
            title: {
                text: '里程数'
            },
            labels: {
                format: '{value} km'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.label}'
                },
                tooltip: {
                    valueSuffix: ' km'
                }
            }
        }
    });
});
</script>
</body>
</html>